export interface VisualEditorModleValue {
  /** 画布容器 */
  container: {
    width: number;
    height: number;
  };
  /** 画布中的每个组件 */
  blocks: VisualEditorBlockData[];
}
export interface VisualEditorBlockData {
  /** 映射组件名 */
  componentKey: string;
  /** 组件的位置 */
  top: number;
  /** 组件的位置 */
  left: number;
  /** 组件宽度 */
  width: number;
  /** 组件高度 */
  height: number;
  /** 组件是否需要调整位置到鼠标的中心 */
  adjustPosition: boolean;
  /** 组件是否选中 */
  focus: boolean;
  uid: number | string;
  /** 组件的层级 */
  zIndex: number;
}

export interface VisualEditorComponent {
  /** 组件名 */
  key: string;
  /** 组件的文本 */
  label: string;
  /** 左侧列表的预览组件 */
  preview: JSX.Element;
  /** 中间画布的渲染组件 */
  render: JSX.Element;
}

export function createComponent() {
  const componentList: VisualEditorComponent[] = []
  const componentMap: Record<string, VisualEditorComponent> = {}
  return {
    /** 组件的数组 */
    componentList,
    /** {组件名：组件} */
    componentMap,
    /** 注册组件函数，
     * 第一个参数：组件名，
     * 第二个参数：组件对象 VisualEditorComponent
    */
    register(key: string, component: Omit<VisualEditorComponent, 'key'>) {
      const comp = { ...component, key }
      componentList.push(comp)
      componentMap[key] = comp
    }
  }
}
/** 组件配置 */
export type VisualEditorConfig = ReturnType<typeof createComponent>

let uid = 0
/** 组件信息 */
export function createNewBlock({top,left,component}: {
  top: number;
  left: number;
  component: VisualEditorComponent;
}): VisualEditorBlockData {
  return {
    uid: uid++,
    componentKey: component!.key,
    left,
    top,
    width:0,
    height:0,
    adjustPosition: true,
    focus: false,
    zIndex: 0,
  }
}

export interface VisualEditorMarkLines {
  x: {left: number; showLeft: number}[];
  y: {top: number; showTop: number}[];
}



